{% extends 'base/base.html' %}
{% block title %}
{{ title }}
{% endblock %}

{% block link %}
    <link rel="stylesheet" href="../../static/css/base/reset.css">
    <link rel="stylesheet" href="../../static/css/base/common.css">
    <link rel="stylesheet" href="../../static/css/base/side.css">
    <link rel="stylesheet" href="../../static/css/news/search.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_684044_un7umbuwwfp.css">
{% endblock %}



{% block main %}
<!-- main start -->
<main id="main">
    <div class="w1200 clearfix">
        <!-- main-contain start  -->
        <div class="main-contain ">
            <!-- search-box start -->
            <div class="search-box">
                <form action="" style="display: inline-flex;">

                    <input type="search" placeholder="请输入要搜索的内容" name="q" class="search-control">


                    <input type="submit" value="搜索" class="search-btn">
                </form>
                <!-- 可以用浮动 垂直对齐 以及 flex  -->
            </div>
            <!-- search-box end -->
            <!-- content start -->
            <div class="content">
                <!-- search-list start -->


                <!-- search-list end -->
                <!-- news-contain start -->

                <div class="news-contain">
                    <div class="hot-recommend-list">
                        <h2 class="hot-recommend-title">热门推荐</h2>
                        <ul class="news-list">

                            <li class="news-item clearfix">
                                <a href="#" class="news-thumbnail">
                                    <img src="../../static/images/python_gui.jpg">
                                </a>
                                <div class="news-content">
                                    <h4 class="news-title">
                                        <a href="#">Python GUI 教程 25行代码写一个小闹钟</a>
                                    </h4>
                                    <p class="news-details">
                                    </p>
                                    <div class="news-other">
                                        <span class="news-type">PythonGUI</span>
                                        <span class="news-time">11/11 18:22</span>
                                        <span class="news-author">python</span>
                                    </div>
                                </div>
                            </li>

                            <li class="news-item clearfix">
                                <a href="#" class="news-thumbnail">
                                    <img src="../../static/images/python_advanced.jpg">
                                </a>
                                <div class="news-content">
                                    <h4 class="news-title">
                                        <a href="#">python高性能编程方法一</a>
                                    </h4>
                                    <p class="news-details">
                                    </p>
                                    <div class="news-other">
                                        <span class="news-type">Python高级</span>
                                        <span class="news-time">11/11 17:13</span>
                                        <span class="news-author">python</span>
                                    </div>
                                </div>
                            </li>

                            <li class="news-item clearfix">
                                <a href="#" class="news-thumbnail">
                                    <img src="../../static/images/jichujiaochen.jpeg">
                                </a>
                                <div class="news-content">
                                    <h4 class="news-title">
                                        <a href="#">python基础 split 和 join函数比较</a>
                                    </h4>
                                    <p class="news-details">
                                    </p>
                                    <div class="news-other">
                                        <span class="news-type">Python基础</span>
                                        <span class="news-time">11/11 16:09</span>
                                        <span class="news-author">python</span>
                                    </div>
                                </div>
                            </li>

                            <li class="news-item clearfix">
                                <a href="#" class="news-thumbnail">
                                    <img src="../../static/images/python_web.jpg">
                                </a>
                                <div class="news-content">
                                    <h4 class="news-title">
                                        <a href="#">Django调试工具django-debug-toolbar安装使用教程</a>
                                    </h4>
                                    <p class="news-details">
                                    </p>
                                    <div class="news-other">
                                        <span class="news-type">python框架</span>
                                        <span class="news-time">11/11 15:28</span>
                                        <span class="news-author">python</span>
                                    </div>
                                </div>
                            </li>

                        </ul>
                    </div>
                </div>


                <!-- news-contain end -->
            </div>
            <!-- content end -->
        </div>
        <!-- main-contain  end -->
        <!-- side start -->
        <aside class="side">
            <div class="side-activities">
                <h3 class="activities-title">在线课堂<a href="javascript:void(0)">更多</a></h3>
                <div class="activities-img">
                    <a href="javascript:void(0);" target="_blank">
                        <img src="https://res.shiguangkey.com//file/201804/26/20180426142628123364782.jpg"
                             alt="title">
                    </a>
                    <p class="activities-tips">对话国外小姐姐</p>
                </div>
                <ul class="activities-list">
                    <li>
                        <a href="javascript:void(0);" target="_blank">
                            <span class="active-status active-start">报名中</span>
                            <span class="active-title"><a href="https://www.shiguangkey.com/course/2432"> Django 项目班</a></span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" target="_blank">
                            <span class="active-status active-end">已结束</span>
                            <span class="active-title"><a href="https://www.shiguangkey.com/course/2321">Python入门基础班</a></span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="side-attention clearfix">
                <h3 class="attention-title">关注我</h3>
                <ul class="side-attention-address">
                    <li>
                        <a href="javascript:void(0);" target="_blank"><i class="PyWhich py-GitHub"></i>Taka</a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" target="_blank"><i class="PyWhich py-zhihu"
                                                                         style="color:rgb(0, 108, 226);"></i>Taka</a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" target="_blank"><i class="PyWhich py-weibo"
                                                                         style="color:rgb(245,92,110);"></i>Taka</a>
                    </li>
                </ul>
                <div class="side-attention-qr">
                    <p>扫码关注</p>
                </div>
            </div>


        </aside>
        <!-- side end -->


    </div>
</main>
<!-- main end -->
{% endblock %}



{% block script %}
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="../../static/js/commons.js"></script>
    <script src="../../static/js/index.js"></script>
{% endblock %}